<template>
  <div class="box">
    <div class="inlneBox">
      <el-form
        ref="form"
        :inline="true"
        :rules="formRules"
        :model="form"
        label-width="100px"
      >
        <!-- 试题内容 -->
        <div class="question-info">
          <div class="upload" style="position: relative">
            <div class="imgLeft" @click="uploadImg" id="upload666">
              <!-- <i class="el-icon-plus"></i> -->
              <el-image style="width: 100%" v-if="upImg == ''">
                <div slot="error" class="image-slot">
                  <i class="el-icon-plus"></i>
                </div>
              </el-image>
              <el-image style="height: 100%" fit="fit" v-else :src="upImg">
              </el-image>
              <!-- <img :src="upImg" alt="" style="height: 100%; width: 100%" /> -->
            </div>
            <el-button
              type="text"
              style="position: absolute; top: 10px; right: 20px"
              @click="selectAll"
              >一键复制</el-button
            >

            <div
              class="imgRight"
              style="overflow: auto"
              id="imgRight"
              v-loading="imgLoading"
            ></div>
            <!-- <div class="imgRight" style="overflow: auto;" id="imgRight"  v-loading="imgLoading"></div> -->
          </div>

          <div style="display: flex" class="boxbox">
            <!-- 回显 -->
            <div class="Echo" style="overflow: auto">
              <!-- 题干 -->
              <span class="echoTitle" v-if="form.testItemContent">题干</span>
              <el-divider v-if="form.testItemContent"></el-divider>
              <div class="echoStem" v-html="gogo(form.testItemContent)"></div>
              <span
                class="echoTitle"
                v-if="isOption && form.questionTypes != '判断题'"
                >选项</span
              >
              <el-divider
                v-if="isOption && form.questionTypes != '判断题'"
              ></el-divider>
              <!-- 选项 -->
              <div
                class="echoOption"
                v-if="isOption && form.questionTypes != '判断题'"
              >
                <div class="optionKV" v-for="item in answersOption">
                  <div class="optionKey">{{ item.identifier }}</div>
                  <div
                    class="optionValue"
                    v-html="gogo(item.answerContent)"
                  ></div>
                </div>
              </div>

              <!-- 解析 -->
              <span class="echoTitle" v-if="form.analysis">解析</span>
              <el-divider v-if="form.analysis"></el-divider>
              <div class="echoAnalysis" v-html="gogo(form.analysis)"></div>
            </div>

            <!-- 题干 -->
            <div style="flex: 1">
              <div class="question-component">
                <div class="question-label">
                  <el-tag type="info">题干</el-tag>
                </div>
                <el-form-item
                  class="component-content"
                  :show-message="formRules.testItemContent"
                  error="请输入题干"
                >
                  <tinymce v-model="form.testItemContent" />
                  <!-- <Editor1 v-model="form.testItemContent"></Editor1> -->
                </el-form-item>
              </div>
              <div
                class="question-component"
                v-if="form.questionTypes != '应用题'"
              >
                <div class="question-label">
                  <el-tag type="info">选项</el-tag>
                </div>
                <div
                  class="component-content"
                  v-if="form.questionTypes == '单选题'"
                >
                  <div v-for="item in answersOption" class="answerItem">
                    <!-- <div> -->
                    <el-radio v-model="form.answerJ" :label="item.identifier">{{
                      item.identifier
                    }}</el-radio>
                    <!-- </div> -->
                    <div style="display: flex; padding: 0 15px">
                      <!-- <el-input
                    v-model="item.answerContent"
                    placeholder="选项点此编辑，选中即设置为正确答案"
                  ></el-input> -->
                      <div style="width: 100%">
                        <tinymce v-model="item.answerContent" />
                      </div>
                      <el-button
                        class="answerDelete"
                        @click="deleteAnswerOption(item)"
                        type="text"
                        icon="el-icon-delete"
                        circle
                      ></el-button>
                    </div>
                  </div>
                  <div>
                    <el-button type="text" @click="addAnswerOption()"
                      >+添加选项</el-button
                    >
                  </div>
                </div>
                <div
                  class="component-content"
                  v-if="form.questionTypes == '多选题'"
                >
                  <el-checkbox-group v-model="form.answerJ">
                    <div v-for="item in answersOption" class="answerItem">
                      <!-- <div> -->
                      <el-checkbox :label="item.identifier">{{
                        item.identifier
                      }}</el-checkbox>
                      <!-- </div> -->
                      <div style="display: flex">
                        <div style="width: 100%">
                          <tinymce v-model="item.answerContent" />
                        </div>
                        <el-button
                          class="answerDelete"
                          @click="deleteAnswerOption(item)"
                          type="text"
                          icon="el-icon-delete"
                          circle
                        ></el-button>
                      </div>
                    </div>
                    <div>
                      <el-button type="text" @click="addAnswerOption()"
                        >+添加选项</el-button
                      >
                    </div>
                  </el-checkbox-group>
                </div>
                <div
                  class="component-content"
                  v-if="form.questionTypes == '判断题'"
                >
                  <div class="answerItem">
                    <!-- <div> -->
                    <el-radio v-model="form.answerJ" label="正确"></el-radio>
                    <el-radio
                      v-model="form.answerJ"
                      label="错误"
                      style="margin-left: 15px"
                    ></el-radio>
                    <!-- </div> -->
                  </div>
                </div>
                <div
                  class="component-content"
                  v-if="form.questionTypes == '填空题'"
                >
                  <div v-for="item in answersOption" class="answerItem">
                    <!-- <div> -->
                    <!-- <el-checkbox>{{
                    item.label
                  }}</el-checkbox> -->
                    <!-- </div> -->

                    <span class="answerSpan">{{ item.identifier }}、</span>
                    <div>
                      <!-- <el-input
                    v-model="item.answerContent"
                    placeholder="选项点此编辑，选中即设置为正确答案"
                  ></el-input> -->

                      <div style="width: 100%">
                        <tinymce v-model="item.answerContent" />
                      </div>
                      <el-button
                        class="answerDelete"
                        @click="deleteAnswerOption(item)"
                        type="text"
                        icon="el-icon-delete"
                        circle
                      ></el-button>
                    </div>
                  </div>
                  <div>
                    <el-button type="text" @click="addAnswerOption()"
                      >+添加一个空</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="question-component">
                <div class="question-label">
                  <el-tag type="info">解析</el-tag>
                </div>
                <div class="component-content">
                  <!-- <Editor v-model="form.analysis"></Editor> -->
                  <tinymce v-model="form.analysis" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="title">
          <div class="item">
            <el-form-item
              required
              prop="entityClassificationId"
              label="试题分类"
              style="width: 350px"
            >
              <el-cascader
                placeholder="试试搜索：指南"
                :options="treeData"
                ref="cascader"
                :placeholder="temporary.entityClassificationId"
                :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  emitPath: false,
                }"
                @change="handleNodeClick"
                filterable
              ></el-cascader>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item required label="试题类型">
              <el-popover
                placement="top-start"
                width="80"
                :placement="'top'"
                popper-class="quertBox"
                trigger="hover"
                ref="popo2"
                :popper-options="{ boundariesElement: 'body' }"
              >
                <div class="questUl">
                  <div
                    class="li"
                    @click="changePo('questionTypes', item.value, 'popo2')"
                    v-for="item in dict.type.test_question_types"
                  >
                    {{ item.value }}
                  </div>
                </div>
                <el-button slot="reference" size="mini" type="primary" plain>{{
                  form.questionTypes
                }}</el-button>
              </el-popover>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item required label="试题难度">
              <el-popover
                placement="top-start"
                width="80"
                :placement="'top'"
                popper-class="quertBox"
                trigger="hover"
                ref="popo3"
                :popper-options="{ boundariesElement: 'body' }"
              >
                <div class="questUl">
                  <div
                    class="li"
                    @click="changePo('difficulty', item, 'popo3')"
                    v-for="item in ['简单', '普通', '困难']"
                  >
                    {{ item }}
                  </div>
                </div>
                <el-button slot="reference" size="mini" type="primary" plain>{{
                  form.difficulty
                }}</el-button>
              </el-popover>
            </el-form-item>
          </div>
          <div class="item itemSpan">
            <el-form-item
              required
              label="试题标签"
              :show-message="formRules.questionTypesId"
              error="选择试题标签"
            >
              <el-button
                @click="visibles.open = true"
                size="mini"
                type="primary"
                plain
                >添加标签</el-button
              >
            </el-form-item>
          </div>
        </div>
        <div>
          <el-tag
            :key="tag.name"
            v-for="(tag, index) in temporary.itemBankQuestionTypes"
            closable
            style="margin-left: 15px; margin-bottom: 10px"
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <!-- ------------------------- -->

        <el-dialog
          title="提示"
          :visible.sync="visibles.open"
          width="50vw"
          class="dialogAddTree"
        >
          <div>
            <el-tag
              :key="tag.name"
              v-for="(tag, index) in temporary.itemBankQuestionTypes"
              closable
              style="margin-right: 15px; margin-bottom: 10px"
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
          <div
            style="
              height: 68vh;
              display: flex;
              min-height: 800px;
              overflow: auto;
            "
          >
            <div class="diaLeft">
              <div
                @click="clickTypeClass(item)"
                v-for="item in typeClassList"
                class="diaItem"
              >
                {{ item.tagHeaderName }}
              </div>
            </div>
            <div class="diaRight">
              <el-tree
                :data="typeTreeData"
                :props="defaultProps"
                :highlight-current="true"
                :default-expand-all="false"
                @node-contextmenu="openMenu"
              ></el-tree>
            </div>
          </div>
          <ul
            ref="card"
            v-show="visible"
            :style="{ left: left + 'px', top: top + 'px' }"
            class="contextmenu"
          >
            <li @click="selectedNode(oldClick)">
              <i class="el-icon-circle-plus-outline"></i> 添加标签
            </li>
          </ul>
        </el-dialog>
        <!-- ------------------------- -->

        <!-- 按钮 -->
        <div style="text-align: right; margin-top: 20px; padding-right: 20px">
          <el-button>重置</el-button>
          <el-button type="primary" @click="formSub">录入</el-button>
        </div>
      </el-form>
    </div>
    <!-- 隐藏的文件输入元素 -->
    <input
      type="file"
      ref="fileInput"
      style="display: none"
      @change="handleFileChange"
    />
  </div>
</template>
<script>
import {
  listClassification,
  addBank,
  getBank,
  updateBank,
  getOcr,
} from "@/api/questionBank/management";
import { listTypes, listHeader } from "@/api/questionBank/type.js";
import serviceNew from "@/utils/requestNew.js";

import tinymce from "@/components/tinymce/index.vue";
export default {
  dicts: ["test_question_types"],
  components: {
    tinymce,
  },
  data() {
    return {
      form: {
        entityClassificationId: "",
        questionTypes: "单选题",
        difficulty: "简单",
        testItemContent: "",
        answerJ: [],
        itemBankQuestionTypes: [],
      },
      formRules: {
        entityClassificationId: [{ required: true, message: "请选择试题分类" }],
        questionTypes: [{ required: true, message: "请选择试题类型" }],
        questionTypesId: false,
        testItemContent: false,
      },
      treeData: [],
      temporary: {
        entityClassificationId: "",
        // questionTypesName: [],
        itemBankQuestionTypes: [],
      },
      visibles: {
        popo1: false,
        open: false,
      },
      typeClassList: [],
      //-------------------回显
      //-------------------
      answersOption: [
        {
          identifier: "A",
          answerContent: "",
        },
        {
          identifier: "B",
          answerContent: "",
        },
        {
          identifier: "C",
          answerContent: "",
        },
        {
          identifier: "D",
          answerContent: "",
        },
      ],
      answerJ: [],
      upImg: "",
      imgLoading: false,
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      typeTreeData: [],
      visible: false,
      top: 0,
      left: 0,
      oldClick: {},
    };
  },
  updated() {
    //判断是否初始配置，若无则配置。
    if (!this.mathJax.isMathjaxConfig.bool) {
      this.mathJax.initMathjaxConfig();
    }
    this.$nextTick((_) => {
      //传入组件id，让组件被MathJax渲染
      this.mathJax.MathQueue("questionList-page");
    });
  },
  mounted() {
    // console.log();
    if (this.$route.query.itemBankId) {
      this.getBankDetail(this.$route.query.itemBankId);
    }
    this.getTreeList();
    this.getTypeClass();
    let that = this;

    window.addEventListener("paste", function (e) {

      e.stopPropagation();
      if (e.clipboardData && e.clipboardData.items) {
        let items = e.clipboardData.items;
        if (items) {
          items = Array.prototype.filter.call(items, function (element) {
            return element.type.indexOf("image") >= 0;
          });
          Array.prototype.forEach.call(items, function (item) {
            var blob = item.getAsFile();

            var rdr = new FileReader();
            rdr.onloadend = function () {

              that.upImg = rdr.result;
            };

            rdr.readAsDataURL(blob);
          });
        }
      }

    });
    let img = document.querySelector("#imgRight");

    img.addEventListener("keydown", (e) => {

    });
  },
  watch: {
    "visibles.popo1": function (n, o) {
      // console.log(n, this);
      if (n) {
        document.body.addEventListener("click", this.closePopo);
      } else {
        document.body.removeEventListener("click", this.closePopo);
        // console.log(this.form);
      }
    },
    "form.questionTypes": function (n, o) {
      if (o != "填空题" && n == "填空题") {
        this.answersOption = [
          {
            identifier: "1",
            answerContent: "",
          },
          {
            identifier: "2",
            answerContent: "",
          },
        ];
      }
      if (o == "填空题" && n != "填空题") {
        this.answersOption = [
          {
            identifier: "A",
            answerContent: "",
          },
          {
            identifier: "B",
            answerContent: "",
          },
          {
            identifier: "C",
            answerContent: "",
          },
          {
            identifier: "D",
            answerContent: "",
          },
        ];
      }
    },
    upImg: function (n, o) {
      if (n == "") return;
      if (n != o) {
        this.imgLoading = true;
        this.getLetax(n);
      }
    },
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  computed: {
    isOption: function () {
      // console.log(this, "jseifjeisfjeisji");
      return this.answersOption.some((ele) => {
        // console.log(ele.answerContent);
        // 如果 answerContent 存在，some 方法会返回 true，并终止遍历
        return ele.answerContent;
      });
    },
  },

  methods: {
    gogo(val) {
      // console.log(val);
      if (val == "" || val == null) return;
      let item = JSON.parse(JSON.stringify(val));
      let ord = /begin{array}([\s\S]*?)\\end{array}/g; // 定义正则表达式，用于匹配以 [\begin{array} 开头的字符串

      let arr = item.match(ord); // 使用 match 方法获取所有匹配项
      // console.log(arr, "arr");
      if (arr == null || arr.length == 0) return val;

      let deleP = (P) => {
        let newP = P.split("<p>");
        let a = newP.join(" ");
        let b = a.split("</p>");
        let c = b.join(" ");
        // console.log(c, "newp");
        return c;
      };

      let abc = null;
      arr.forEach((ele) => {
        abc = val.split(ele);
        abc = abc.join(deleP(ele));
      });
      return abc;
      console.log(abc, "拼接完成");
    },
    //获取试题详情
    getBankDetail(val) {
      getBank(val).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.form.itemBankQuestionTypes = [];
          this.answersOption = res.data.answerList;

          this.form.entityClassificationId = res.data.entityClassificationId;
          if (this.form.questionTypes == "单选题") {
            this.form.answerJ = res.data.answer;
          } else {
            this.form.answerJ = res.data.answerJ;
          }

          let label = JSON.parse(
            JSON.stringify(res.data.itemBankQuestionTypeList)
          );

          label.forEach((ele) => {
            ele["id"] = ele.questionTypesId;
            delete ele.questionTypesId;
          });
          // console.log(label, "label");

          this.temporary.itemBankQuestionTypes = label;
          label.forEach((ele) => {
            let obj = {
              questionTypesId: ele.questionTypesId,
            };
            this.form.itemBankQuestionTypes.push(obj);
          });

          let names = label.map((obj) => obj.questionTypesId);

          //class

          this.temporary.entityClassificationId = res.data.classification;
        }
      });
    },

    resetForm() {
      // this.form = {
      //   entityClassificationId: "",
      //   questionTypes: "单选题",
      //   difficulty: "简单",
      //   testItemContent: "",
      //   answerJ: [],
      //   // itemBankQuestionTypes: [],
      // };

      // this.form = {
      // this.form.entityClassificationId= ""
      this.form.questionTypes = "单选题";
      this.form.difficulty = "简单";
      this.form.testItemContent = "";
      this.form.answerJ = [];
      // itemBankQuestionTypes: [],
      // };

      this.answersOption = [
        {
          identifier: "A",
          answerContent: "",
        },
        {
          identifier: "B",
          answerContent: "",
        },
        {
          identifier: "C",
          answerContent: "",
        },
        {
          identifier: "D",
          answerContent: "",
        },
      ];
      // this.temporary= {
      //   entityClassificationId: "",
      //   // questionTypesName: [],
      //   itemBankQuestionTypes: [],
      // },
      // this.temporary= {
      // this.temporary.entityClassificationId= ""
      // itemBankQuestionTypes= []
      // },
      this.upImg = "";
      this.form.analysis = "";
    },
    changePo(key, val, pop, test, testValue, item) {
      // console.log(val);
      if (key == "questionTypesId") {
        if (item.isClick) return;
        // console.log("id");
        let obj = {
          questionTypesId: val,
        };
        // console.log(obj, "obj", this.form.itemBankQuestionTypes);
        this.form.itemBankQuestionTypes.push(obj);
        let obj1 = {
          questionTypesId: val,
          name: testValue,
        };
        this.temporary.itemBankQuestionTypes.push(obj1);
        item.isClick = true;
        // console.log(this.form.itemBankQuestionTypes);
      } else {
        this.form[key] = val;
        this.$refs[pop].doClose();
      }
    },
    getTreeList() {
      listClassification().then((res) => {
        this.treeData = res.data;
      });
    },
    //点击级联分类
    handleNodeClick(val) {
      let node = this.$refs.cascader.getCheckedNodes()[0];
      this.form.entityClassificationId = node.data.id;
      // console.log(this.temporary.entityClassificationId, "jsjisfj");
    },
    //节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    closePopo() {
      let arr = Object.keys(this.visibles);
      arr.forEach((ele) => {
        this.visibles[ele] = false;
      });
    },
    //添加选项
    addAnswerOption() {
      if (this.form.questionTypes == "填空题") {
        let lastAnswer =
          this.answersOption.length > 0
            ? this.answersOption[this.answersOption.length - 1].identifier
            : 0;
        let obj = {
          identifier: Number(lastAnswer) + 1,
          answerContent: "",
        };
        this.answersOption.push(obj);
      } else {
        // 创建一个空数组来存储字母
        let lettersArray = [];

        // 使用for循环和字符编码生成A到Z的字母
        for (let i = 65; i <= 90; i++) {
          lettersArray.push(String.fromCharCode(i));
        }
        let lastAnswer =
          this.answersOption.length > 0
            ? this.answersOption[this.answersOption.length - 1].identifier
            : " "; // 如果没有选项，则从'a'开始
        for (let i = 0; i < lettersArray.length; i++) {
          if (lastAnswer == lettersArray[i]) {
            let obj = {
              identifier: lettersArray[i + 1],
              answerContent: "",
            };
            this.answersOption.push(obj);
          }
        }
        if (lastAnswer == " ") {
          let obj = {
            identifier: "A",
            answerContent: "",
          };
          this.answersOption.push(obj);
        }
      }
    },
    //录入
    formSub() {
      let arr = [];
      this.temporary.itemBankQuestionTypes.forEach((ele) => {
        let typeObj = {
          questionTypesId: ele.id,
        };
        arr.push(typeObj);
      });
      console.log(arr, "arr");
      this.form.itemBankQuestionTypes = arr;
      if (
        this.form.questionTypes != "判断题" ||
        this.form.questionTypes != "应用题"
      ) {
        this.form["answerList"] = this.answersOption;
      } else {
        delete this.form.answerList;
      }

      if (this.form.itemBankQuestionTypes.length == 0) {
        this.formRules.questionTypesId = true;
        return;
      } else {
        this.formRules.questionTypesId = false;
      }
      if (this.form.testItemContent == "") {
        this.formRules.testItemContent = true;
        return;
      } else {
        this.formRules.testItemContent = false;
      }

      if (!Array.isArray(this.form.answerJ)) {
        this.form["answerJ"] = [this.form.answerJ];
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form["answersNumber"] = this.form.answerJ.length;
          this.form["analysis"] = this.form.analysis;

          // this.form.itemBankQuestionTypes=this.form.itemBankQuestionTypes

          if (this.form.itemBankId) {
            updateBank(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                setTimeout(() => {
                  this.$router.back(1);
                }, 1000);
                this.resetForm();
              }
            });
          } else {
            addBank(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                setTimeout(() => {
                  this.$router.back(1);
                }, 1000);
                this.resetForm();
              }
            });
          }
        }
      });
    },
    //删除选项
    deleteAnswerOption(val) {
      this.answersOption = this.answersOption.filter((ele) => {
        return val.identifier != ele.identifier;
      });
      let num = parseFloat(val.identifier);
      if (!isNaN(num)) {
        this.answersOption.forEach((ele, index) => {
          ele["identifier"] = index + 1;
        });
      } else {
        // console.log("字母", num, val.identifier);
      }
    },
    //删除标签
    handleClose(tag) {
      // console.log(this.temporary.itemBankQuestionTypes, tag);
      this.temporary.itemBankQuestionTypes.splice(
        this.temporary.itemBankQuestionTypes.indexOf(tag),
        1
      );

      // this.form.itemBankQuestionTypes.splice(
      //   this.temporary.itemBankQuestionTypes.indexOf(tag),
      //   1
      // );
    },
    //上传ocr
    uploadImg() {
      // 触发隐藏文件输入元素的点击事件
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      // console.log(event, "文件选择");
      let _this = this;

      // 获取用户选择的文件
      const file = event.target.files[0];
      if (file) {
        // 在这里处理文件，例如上传文件
        // console.log(file);
        const reader = new FileReader();

        reader.onloadend = function () {
          const base64data = reader.result;
          // console.log(base64data);
          _this.upImg = base64data;

        };
        reader.readAsDataURL(file);

        // 可以调用一个方法来处理文件上传
        // this.uploadFile(file);
      }
    },
    //粘贴事件
    getLetax(baes64) {
      let _this = this;
      let formData = {
        base64: baes64,
      };
      getOcr(formData)
        .then((res) => {
          // console.log(res);

          let formattedText = res.msg.replace(/\n/g, "<br>");
          // let formattedText = res.data.latex.replace(/\n/g, "<br>");
          document.getElementById("imgRight").innerHTML = formattedText;

          _this.imgLoading = false;
        })
        .catch((err) => {
          // console.log(err);
          _this.$message.error("解析出错");
          _this.imgLoading = false;
        });
    },
    //全选效果
    selectAll(event) {
      var div = document.getElementById("imgRight");
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(div);
      selection.removeAllRanges();
      selection.addRange(range);
      navigator.clipboard.writeText(div.innerText);
    },
    //点击树状图添加标签
    selectedNode(data, node, event) {
      let obj = {
        name: data.name,
        id: data.id,
      };
      let isDuplicate = this.temporary.itemBankQuestionTypes.some((item) => {
        return JSON.stringify(item) === JSON.stringify(obj);
      });

      if (isDuplicate) {
        this.$message.warning("请勿添加重复标签");
      } else {
        this.temporary.itemBankQuestionTypes.push(obj);
      }
    },
    //获取标签分类
    getTypeClass() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
      listHeader(obj).then((res) => {
        this.typeClassList = res.rows;
        this.clickTypeClass(res.rows[0]);
      });
    },
    //点击标签分类
    clickTypeClass(item) {
      listTypes({ reserve3: item.tagHeaderId }).then((res) => {
        this.typeTreeData = res.rows;
      });
    },
    openMenu(event, data) {
      this.left = event.clientX;
      this.top = event.clientY;
      this.visible = true;
      console.log(data);
      this.oldClick = data;
    },
    closeMenu() {
      this.visible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.upload {
  height: 400px;
  border: 1px red solid;
  margin-bottom: 15px;
  display: flex;
  margin: 15px;

  .imgLeft {
    flex: 1;
    // background-color: aliceblue;
    border-right: #dcdfe6 1px dashed;
    text-align: center;
    display: flex;
    align-items: center;

    i {
      font-size: 70px;
      line-height: 400px;
    }
  }
  .imgRight {
    flex: 1;
    min-width: 60%;
    padding: 15px;
    // background-color: aquamarine;
  }
}

.box {
  height: 100%;
  width: 100%;
  background-color: #f5f7fa;
  padding: 20px;
  .inlneBox {
    height: 100%;
    width: 100%;
    background-color: white;
    overflow: auto;
    .title {
      height: 80px;
      // border-bottom: 1px solid #dcdfe6;
      display: flex;
      align-items: center;
      padding: 0 15px;
      font-size: 20px;
      .item {
        margin-right: 20px;
        min-width: 300px;

        .el-form-item {
          margin-bottom: 0;
          width: 100%;
          .el-form-item__label:after {
            content: "*";
            color: #ff4949;
            margin-right: 4px;
          }

          ::v-deep .el-form-item__content {
            width: auto;
            text-align: left;
            font-size: 19px;
            .el-button {
              font-size: 19px;
            }
          }
          ::v-deep label {
            font-weight: inherit;

            font-size: 19px;
          }
        }
      }
      .itemSpan {
        width: 50%;
        text-align: left;
        span {
          // background-color: aquamarine;
          margin-right: 5px;
          // padding: 5px;
        }
      }
    }

    .question-info {
      padding: 0 0 15px;
      // margin-top: 20px;
      .question-component {
        display: flex;
        .question-label {
          width: 100px;
          display: flex;
          align-items: flex-start;
          justify-content: center;
        }
        .component-content {
          flex: 1;
          margin-bottom: 25px;
          ::v-deep .el-form-item__content {
            width: 100%;
          }
          .answerItem {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .el-radio {
              margin-right: 0;
            }
            .answerSpan {
              display: inline-block;
              width: 20px;
              height: 20px;
            }
            ::v-deep .el-input {
              width: 95%;
            }
            .answerDelete {
              display: none;
            }

            > div {
              width: 100%;
              padding-right: 10px;
            }
            ::v-deep .el-input__inner {
              border: 0;
            }
          }
          .answerItem:hover {
            .el-button--medium.is-circle {
              padding: 5px;
            }
            .answerDelete {
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
.popo {
  padding: 10px 0;
  .el-input {
    margin: 0 10px;
    width: auto;
    margin-bottom: 10px;
  }
  .line {
    height: 1px;
    background-color: #dcdfe6;
  }
}

.boxbox {
  //回显
  .Echo {
    width: 500px;
    border: 1px red solid;
    margin-left: 15px;
    padding: 15px;
    .echoTitle {
      font-size: 16px;
      font-weight: bold;
    }

    .echoStem {
      ::v-deep > p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        img {
          display: inline-block;
        }
      }
    }

    .echoOption {
      // border-bottom: 1px red solid;
      .optionKV {
        display: flex;
        align-items: center;
        .optionKey {
          width: 80px;
        }
        .optionValue {
        }
      }
    }

    .echoAnalysis {
    }
  }
}

.diaRight {
  flex: 1;
}
.diaLeft {
  min-width: 250px;
  text-align: center;
  .diaItem {
    line-height: 40px;
  }
  .diaItem:hover {
    background-color: #dcdfe6;
    cursor: pointer;
  }
}

.dialogAddTree {
  ::v-deep .el-dialog {
    min-width: 1070px;
    // position: relative;
  }
}

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>
